<template>
	<view class="container">
		<view class="order">
			<scroll-view class="scroll" scroll-y="true" scroll-x="true" >
				<view class="head">
					<view class="head-item">交易时间</view>
					<view class="head-item">商品</view>
					<view class="head-item">订单数</view>
					<view class="head-item">收货客户</view>
					<!-- <view class="head-item">状态</view> -->
					<view class="head-item">交易金额</view>
				</view>
				<view class="list" v-for="(item,index) in this.customer_order">
					<view class="list-item">{{item.jysj}}</view>
					<view class="list-item special">
						<view class=" goods" v-for="(item_item,index) in item.goods">
							<view class="goods-item">{{item_item.spmc}}</view>
							<view class="goods-item">x{{item_item.spsl}}</view>
						</view>
					</view>
					<view class="list-item">
						{{item.psdz}}
						<button type="primary" size="mini" @click="navigate(item.psdz,item)">导航</button>
					</view>
					<!-- <view class="list-item">交易成功</view> -->
					<view class="list-item">{{item.sum_money}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {request} from '../../api/ajax.js'
	export default{
		data(){
			return{
				
			}
		},
		computed: {
		  ...mapState(['customer_order']),
		},
		async onLoad() {
			console.log('customerOrder')
		},
		methods:{
			async navigate(address,item){
				console.log(address)
				const result =  await request({
					url:'https://restapi.amap.com/v3/geocode/geo',
					data:{
						key:'201a9e25589e5ef2438cd4c62902d0ce',
						address:address,
						output:'JSON'
					}
				})
				console.log('result',result.geocodes[0].formatted_address)
				const formatted_address = result.geocodes[0].formatted_address
				let arr =  result.geocodes[0].location.split(',') //arr是数组，里面的元素是经纬度
				console.log('arr' , arr)
				// this.toMapAPP(arr[1],arr[0],formatted_address)
			},
			
			toMapAPP(latitude,longitude,name){
				let url = "";
				if (plus.os.name == "Android") {//判断是安卓端
					plus.nativeUI.actionSheet({//选择菜单
						title: "选择地图应用",
						cancel: "取消",
						// buttons: [{title: "高德地图"},{title: "百度地图"}, {title: "腾讯地图"}]
						buttons: [{title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						// buttons: [{title: "高德地图"},{title: "百度地图"}, {title: "腾讯地图"}]
						buttons: [ {title: "高德地图"}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							case 2:
								url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			}
			
		
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
	}
	.order{
		width: 98%;
		position: absolute;
		// border: 1upx solid #ff0000;
		left: 1%;
		top: 20upx;
		.scroll{
			// white-space: nowrap;
			// border: 1upx solid #ff0000;
		}
	}
	.head{
		display: flex;
		flex-direction: row;
		// width: 180%;
		 line-height: 100upx;
		.head-item{
			flex-grow: 1;
			text-align: center;
			background-color: #F5f5f5;
			color: gray;
			// border: 1rpx solid #00f;
			// width: 16.6%;
			// line-height: 60upx;
		}
	}
	.goods{
		// border: 1rpx solid #f00;
		display: flex;
		flex-direction: row;
		align-items: center;
		.goods-item{
			flex-grow: 1;
			width: 20%;
			// border: 1rpx solid #f00;
		}
		// justify-content: space-between;
		// margin-bottom: 20rpx;
		// padding: 20rpx 0;
	}
	.list{
		// width: 180%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		// border: 1upx solid #f00;
		border-bottom: 1rpx solid #bbb;
		padding: 20rpx 0;
		.list-item{
			/* display: inline-block;
			vertical-align: middle; */
			// flex-grow: 1;
			width: 20%;
			text-align: center;
			// border: 1rpx solid #00f;
		}
		.special{
			width: 40%;
		}
	}
</style>
